<template>
  <div>
    <van-search
      v-model="value"
      background="#4fc08d"
      placeholder="请输入搜索关键词"
      show-action
    >
      <template #left>
        <van-icon name="arrow-left" size="25" class="zxc" />
      </template>
      <template #action>
        <span @click="map" class="iconfont asd">&#xe607;</span>
      </template>
      <template #label>
        <span>{{ adress }} </span>
        <van-icon name="arrow-down" />
        <span class="qwe"> |</span>
      </template>
    </van-search>

    <van-sticky>
      <van-dropdown-menu>
        <van-dropdown-item title="区域">
          <van-picker show-toolbar toolbar-position="bottom" />
        </van-dropdown-item>
        <van-dropdown-item title="方式">
          <van-picker show-toolbar toolbar-position="bottom" />
        </van-dropdown-item>
        <van-dropdown-item title="租金">
          <van-picker show-toolbar toolbar-position="bottom" />
        </van-dropdown-item>
        <van-dropdown-item title="筛选" @open="show = true">
        </van-dropdown-item>
      </van-dropdown-menu>
    </van-sticky>
    <div style="height: 2000px">123</div>
    <van-popup
      v-model="show"
      position="right"
      :style="{ height: '100%', width: '80%' }"
    />
  </div>
</template>

<script>
import { getCityMes } from '@/api/foundhouse'
export default {
  name: 'FoundHouse',
  components: {},
  props: {},
  data() {
    return {
      show: false,
      value: '',
      adress: window.localStorage.getItem('city')
        ? JSON.parse(window.localStorage.getItem('city')).label
        : '杭州'
    }
  },
  computed: {},
  watch: {},
  async created() {
    const city = JSON.parse(window.localStorage.getItem('city')).value
    console.log(city)
    const res = await getCityMes(city)
    const cityQuyu = res.data.body
    localStorage.setItem('quyu', JSON.stringify(cityQuyu))
  },
  methods: {
    map() {
      console.log(1)
      this.$router.push('/map')
    }
  }
}
</script>

<style scoped lang="less">
.zxc {
  margin-right: 6px;
  color: #fff;
}
.asd {
  font-size: 25px;
}
.qwe {
  color: #ccc;
}
.pick {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 40px;
  font-size: 17px;
  .icona {
    color: #ccc;
  }
}
</style>
